<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=1140">
    <title>媒体库详情</title>
    <link rel="stylesheet" type="text/css" href="script/package/Swiper-3.4.2/dist/css/swiper.css">
    <link rel="stylesheet" href="style/css/common.css">
    <link rel="stylesheet" type="text/css" href="style/css/style.css">
</head>

<body class="picDetail">
    <div class="header-wrap">
        <!-- header DOM结构 -->
    </div>
    <div class="main">
        <div class="linkNav"><span>当前位置:</span><a href="">媒体库<i>></i></a><a href="">荷花</a></div>
        <div class="content">
            <div class="articlePic">
                <div class="left-pic fl">
                    <div class="pic-list">
                        <div id="picContent" class="box-size">
                            <div class="pic-show"><img src="http://imgcdn.jiupaicn.com//jph_1496295727653e9850fb0-ed0c-4ecc-8b3e-bd5a9e36c56c@800w_1l" alt=""></div>
                            <div class="pic-show"><img src="http://imgcdn.jiupaicn.com//jph_1496295728771b5156d58-4aa6-4fed-8a95-32e9a7276e7d@800w_1l" alt=""></div>
                            <div class="pic-show"><img src="http://imgcdn.jiupaicn.com//jph_1496295729905ade0b2e4-4fb4-4ac5-962d-30219499c6fe@800w_1l" alt=""></div>
                            <div class="pic-show"><img src="http://imgcdn.jiupaicn.com//jph_1496295728821fe8776b0-6e0f-44d2-99d9-692b2d504f82@800w_1l" alt=""></div>
                            <div class="pic-show"><img src="http://imgcdn.jiupaicn.com//jph_149629573083102b47dcd-c143-404d-aceb-2576807bffa6@800w_1l" alt=""></div>
                            <div class="pic-show"><img src="http://imgcdn.jiupaicn.com//jph_149629573000664f573e8-8def-446f-8fb8-7d0a2b78f372@800w_1l" alt=""></div>
                            <div class="pic-show"><img src="http://imgcdn.jiupaicn.com//jph_149629573108395763d9e-f790-448d-85f9-911bca630c43@800w_1l" alt=""></div>
                            <div class="pic-show"><img src="http://imgcdn.jiupaicn.com//jph_1496295731917576c0945-e7ef-4717-9411-76553df2f1f2@800w_1l" alt=""></div>
                            <div class="pic-show"><img src="http://imgcdn.jiupaicn.com//jph_1496295732467edc27fc9-9609-4c91-97c0-3cf73bbeaca3@800w_1l" alt=""></div>
                            <div class="pic-show"><img src="http://imgcdn.jiupaicn.com//jph_14962957321865c2e8972-d459-4b80-97c3-6f27cb810245@800w_1l" alt=""></div>
                            <div class="pic-show"><img src="http://imgcdn.jiupaicn.com//jph_1496295733503993b8811-c733-4cb3-9994-a45c71e5f253@800w_1l" alt=""></div>
                            <div class="pic-show"><img src="http://imgcdn.jiupaicn.com//jph_14962957333858d47d860-90a5-4261-bce2-3168380f12fa@800w_1l" alt=""></div>
                            <div class="pic-show"><img src="http://imgcdn.jiupaicn.com//jph_1496295733730e276ae8c-3cfa-4257-8e32-790a741738f2@800w_1l" alt=""></div>
                            <div class="pic-show"><img src="http://imgcdn.jiupaicn.com//jph_1496295734478facf47ee-9539-464c-8572-1e6bf9a2af3e@800w_1l" alt=""></div>
                        </div>
                    </div>
                    <div class="hide-button" style="cursor:pointer;">
                        <span></span>
                    </div>
                    <span id="picPrev" class="arrow-left" href=""><img src="style/images/prev_03.png" width="17px" height="26px"></span>
                    <span id="picNext" class="arrow-right" href=""><img src="style/images/next.png" width="17px" height="26px"></span>
                </div>
                <div class="right-content fr">
                    <h3 id="picItemTitle">致六一，国画中的快乐童年</h3>
                    <div class="pic-count">
                        <div class="box-count"><span id="picCurrentPage"><span><em>6</em>/<i>6</i></span></span>
                            <span id="picItemDescription" class="count-centent">中国画《人已远，心犹在》 作者：王家训.4米），她将自己异常庞大的臀部归功于4次怀孕。</span>
                        </div>
                    </div>
                    <div id="picTag" class="pic-types">
                    </div>
                    <div class="pic-date">
                        <p id="picDate"></p>
                    </div>
                </div>
            </div>
        </div>
                    <div class="about-link clearfix">
                <div class="about-report fl">
                    <div class="r-wrap">
                        <h2>相关报道</h2>
                        <a href="">武汉市被评为最受欢迎城市</a>
                        <a href="">武汉市被评为最受欢迎城市</a>
                        <a href="">武汉市被评为最受欢迎城市</a>
                        <a href="">武汉市被评为最受欢迎城市</a>
                        <a href="">武汉市被评为最受欢迎城市</a>
                    </div>
                </div>
                <div class="about-liters fl">
                    <div class="r-wrap">
                        <h2>相关文献</h2>
                        <a href="">武汉市被评为最受欢迎城市</a>
                        <a href="">武汉市被评为最受欢迎城市</a>
                        <a href="">武汉市被评为最受欢迎城市</a>
                        <a href="">武汉市被评为最受欢迎城市</a>
                        <a href="">武汉市被评为最受欢迎城市</a>
                    </div>
                </div>
                <div class="about-anli fl">
                    <div class="r-wrap">
                        <h2>相关案例</h2>
                        <a href="">武汉市被评为最受欢迎城市</a>
                        <a href="">武汉市被评为最受欢迎城市</a>
                        <a href="">武汉市被评为最受欢迎城市</a>
                        <a href="">武汉市被评为最受欢迎城市</a>
                        <a href="">武汉市被评为最受欢迎城市</a>
                    </div>
                </div>
            </div>
    </div>
    <div class="footer-wrap">
        <!--    页脚部分Dom -->
    </div>
    <script src="script/jquery.min.js"></script>
    <script src="script/package/Swiper-3.4.2/dist/js/swiper.jquery.js"></script>
    <script src="script/headerFooter.js"></script>
    <script>
    /*导航焦点初始化*/
    $(".nav").find('a').eq(7).addClass("active");

    /*图片欣赏*/
    /* 获取从ajax中返回来的值 */
    var currentPage = 0;
    var picUrlData = '';
    $.ajax({
        url: 'data/picURL.json',
        type: 'post',
        dataType: 'json',
        success: function(data) {
            picUrlData = data;
            for (var i = 0; i < picUrlData.picDetail.length; i++) {
                if (!picUrlData.picDetail[i].description) {
                    picUrlData.picDetail[i].description = '作者比较懒，没有写相关描述';
                }
                $('#picContent').append('<div class="pic-show"><img src="' + picUrlData.picDetail[i].url + '" alt=""></div>');
            }
            if (picUrlData.picDetail.length > 0) {
                $('#picItemTitle').html(picUrlData.picDetail[0].ctTitle);
                $('#picItemDescription').html(picUrlData.picDetail[0].description);
                $('#picCurrentPage').html('<span><em>1</em>/<i>' + picUrlData.picDetail.length + '</i>');
            }
            $('#picDate').html(getFormattedDate(new Date(picUrlData.createDate)));
            if (picUrlData.original == 1) {
                $('#picDate').before('<p class="ori-tag yes">原创</p>');
            }
            tags = picUrlData.tag.split(' ');
            for (i = 0; i < tags.length; i++) {
                if ($.trim(tags[i]) != '') {
                    $('#picTag').append('<a href="javascript:void(0);">' + $.trim(tags[i]) + '</a>');
                }
            }


        }
    })

    $('#picPrev').click(function() {
        if (currentPage <= 1) {
            currentPage = picUrlData.picDetail.length + 1;
        }
        currentPage--;
        $(".box-size").css('left', -(currentPage - 1) * 100 + '%');
        $('#picItemTitle').html(picUrlData.picDetail[currentPage - 1].ctTitle);
        $('#picItemDescription').html(picUrlData.picDetail[currentPage - 1].description);
        $('#picCurrentPage').html('<span><em>' + currentPage + '</em>/<i>' + picUrlData.picDetail.length + '</i>');
    });
    $('#picNext').click(function() {
        if (currentPage >= picUrlData.picDetail.length) {
            currentPage = 0;
        }
        currentPage++;
        $(".box-size").css('left', -(currentPage - 1) * 100 + '%');
        $('#picItemTitle').html(picUrlData.picDetail[currentPage - 1].ctTitle);
        $('#picItemDescription').html(picUrlData.picDetail[currentPage - 1].description);
        $('#picCurrentPage').html('<span><em>' + currentPage + '</em>/<i>' + picUrlData.picDetail.length + '</i>');
    })

    /*日期格式化*/
    function getFormattedDate(timestamp) {
        var date = new Date(timestamp);
        var month = date.getMonth() + 1;
        var day = date.getDate();
        var hour = date.getHours();
        var min = date.getMinutes();
        var sec = date.getSeconds();

        month = (month < 10 ? "0" : "") + month;
        day = (day < 10 ? "0" : "") + day;
        hour = (hour < 10 ? "0" : "") + hour;
        min = (min < 10 ? "0" : "") + min;
        sec = (sec < 10 ? "0" : "") + sec;

        // var str = date.getFullYear() + "-" + month + "-" + day + " " +  hour + ":" + min + ":" + sec;
        var str = date.getFullYear() + "-" + month + "-" + day + " " + hour + ":" + min;

        return str;
    }
    </script>
</body>

</html>
